<template>
	<div style="display: inline; padding-right: 10px">
		<div style="display: flex; align-items: center">
			<el-badge v-if="imgList.length > 0" :hidden="imgList.length == 1" :value="imgList.length">
				<el-image :style="{ height: height, width: width }" :src="imgList[0]" :preview-src-list="imgList"></el-image>
			</el-badge>
			<img
				v-for="(item, index) in fileList"
				:key="index"
				:style="{ height: height, width: width }"
				:src="getFileTypeImg(item)"
				@click="open(item)"
			/>
		</div>
		<el-dialog title="音频播放" append-to-body :visible.sync="dialogVisible" width="30%" :before-close="stop">
			<div align="center">
				<audio :src="audioSrc" autoplay="false" controls="true" ref="audio"></audio>
			</div>
		</el-dialog>
		<y-show-file ref="showFile" />
	</div>
</template>

<script>
import { isImg, getHttpURL } from '@/utils/fileUtils'
import YShowFile from '@/components/YShowFile'

export default {
	components: { YShowFile },
	props: {
		path: {
			type: String | Array,
			required: true,
		},
		height: {
			type: String,
			default: '150px',
		},
		width: {
			type: String,
			default: '150px',
		},
	},
	computed: {
		pathList() {
			let path = []
			if (this.path instanceof Array) {
				path = this.path
			} else {
				if (this.path) {
					path = this.path.split(',')
				}
			}
			return path
		},
	},
	// 监听 pathList
	watch: {
		pathList: {
			handler: function (val, oldVal) {
				this.setList(val)
			},
			deep: true,
		},
	},
	created() {
		this.setList(this.pathList)
	},
	data() {
		return {
			paths: [],
			baseUrl: process.env.VUE_APP_IMG_API,
			typeFile: '',
			imgList: [],
			fileList: [],
			fileType: {
				pdf: require('../../assets/images/pdf.png'),
				rar: require('@/assets/images/zip.png'),
				zip: require('@/assets/images/zip.png'),
				doc: require('@/assets/images/word.png'),
				docx: require('@/assets/images/word.png'),
				ppt: require('@/assets/images/ppt.png'),
				pptx: require('@/assets/images/ppt.png'),
				xls: require('@/assets/images/xml.png'),
				m4a: require('../../assets/images/m4a.png'),
				mp3: require('../../assets/images/m4a.png'),
			},
			unknownType: require('../../assets/images/unknown.png'),
			dialogVisible: false,
			audioSrc: '',
		}
	},
	methods: {
		setList(val) {
			this.imgList = []
			this.fileList = []
			val.forEach((item) => {
				let url = this.getUrl(item)
				if (isImg(url)) {
					this.imgList.push(getHttpURL(url))
				} else {
					this.fileList.push(getHttpURL(url))
				}
			})
		},
		// 对老数据兼容
		getUrl(item) {
			// 如果item是字符串 则直接返回
			if (typeof item === 'string') {
				return item
			} else {
				// 如果是对象 则返回对象的url
				return item.url ? item.url : item.path
			}
		},

		// 获取文件类型图片
		getFileTypeImg(value) {
			let index = value.lastIndexOf('.')
			let str = value.slice(index + 1)
			return this.fileType[str.toLowerCase()] ? this.fileType[str.toLowerCase()] : this.unknownType
		},
		open(value) {
			let index = value.lastIndexOf('.')
			let str = value.slice(index + 1)
			if (str == 'm4a' || str == 'mp3') {
				this.audioSrc = value
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.audio.play()
				})
				return
			}
			this.$refs.showFile.open({ url: value })
		},
		//音频暂停
		stop() {
			this.dialogVisible = false
			this.$refs.audio.pause()
			this.$refs.audio.currentTime = 0
		},
		// 遍历数组对象的某个属性 返回数组
		getArrByObj(arr, key) {
			let newArr = []
			arr.forEach((item) => {
				newArr.push(item[key])
			})
			return newArr
		},
	},
}
</script>

<style></style>
